<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
<%@include file="/comm/head.jsp"%>
    <style>
        .layout-logo{
            width: 50px;
            height: 30px;
            border-radius: 3px;
            float: left;
            position: relative;
            top: 15px;
            left: 120px;
        }
        .layout-nav{
            margin-left:200px;
            letter-spacing: 10px;
            font-size:24px;

        }

        .collapsed-menu{
           overflow: hidden;
            background-color:#000 !important;
        }
        .collapsed-menu .ivu-menu-light{
            background-color:#000 !important;
        }

    </style>
</head>
<body>
<div id="root">
    <div class="layout">
        <Layout>
            <Header>
                <i-Menu mode="horizontal" theme="primary" active-name="1">
                    <div class="layout-logo">
                    <Avatar src="attach/chaoshi.jpg"></Avatar>
                    </div>
                    <div class="layout-nav">
                        <h3 style="color:black">明华超市管理系统
                            <span style="font-size: 15px;padding-left: 320px; color: lightgoldenrodyellow;">

                        <c:if test="${!empty loginUser }" >
                             欢迎!${loginUser.username}${loginRole.roleName}
                        </c:if>
                         </span>
                        </h3>

                        <i-button type="success" size="small" style="position:relative;top:-43px;left:1000px;" @click="logout()">退出</i-button>
                    </div>



                </i-Menu>
            </Header>
            <Layout>
                <sider collapsible collapsible-width="1%"  v-model="isCollapsed" :style="{background: '#fff'}" :class="menuitemClasses">
                   <i-Menu active-name="1-3" theme="light" width="auto" :open-names="['0']">
                    <c:forEach var="p01" items="${menuList}" varStatus="s01">
                        <Submenu name="${s01.index}">
                        <template slot="title">
                            <Icon type="${p01.icon}"></Icon>
                         ${p01.name}
                        </template>
                     <c:forEach items="${p01.children}" var="p02" varStatus="s02">
                         <Menu-Item name="${s01.index}-${s02.index}">
                             <a href="${p02.url}" target="main">${p02.name}</a>
                         </Menu-Item>
                     </c:forEach>
                        </Submenu>
                    </c:forEach>
                   </i-Menu>
                </sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <i-Content :style="{minHeight: '500px', background: 'white'}">
                       <div style="background-image: url('/attach/111.png');background-size:100% 100%;width: 100%;height: 607px" >
                        <iframe name="main" width="100%" height="800px" frameborder="0">
                        </iframe>
                       </div>
                    </i-Content>
                </Layout>
            </Layout>
        </Layout>
    </div>


</div>


<script>
    new Vue({
        el:"#root",
        data:{
            menus:[],
            isCollapsed: false
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods:{
            logout(){
                location.href = "${pageContext.request.contextPath}/logout";
            },
            /*createMenu(){
                axios.get("${pageContext.request.contextPath}/createMenu")
                    .then(({data})=>{
                        this.menus=data.result;
                    });
            }*/
        },
       /* mounted(){
            this.createMenu();
        }*/
    })
</script>
</body>
</html>
